<template>
    <view class="page">
        <view class="list">
            <view :class="['item', state == 0 ? 'active' : '']" @click="state = 0">未提交</view>
            <view :class="['item', state == 1 ? 'active' : '']" @click="state = 1">村(整改+初审)</view>
            <view :class="['item', state == 2 ? 'active' : '']" @click="state = 2">街道(初审)</view>
            <view :class="['item', state == 3 ? 'active' : '']" @click="state = 3">第三方考评员(复审)</view>
            <view :class="['item', state == 4 ? 'active' : '']" @click="state = 4">区级审核员(终审)</view>
            <view :class="['item', state == 5 ? 'active' : '']" @click="state = 5">结束</view>
        </view>
        <view class="submit">
            <button type="primary" @click="submit">提 交</button>
        </view>
    </view>
</template>
<script>
import { editEvaluateState } from "@/api/evaluate";
export default {
    data() {
        return {
            state: 0,
            id: ''
        }
    },
    methods: {
        // 提交
        submit() {
            uni.showModal({
                title: '提示',
                content: '确定修改吗?',
                success: (res) => {
                    if (res.confirm) {
                        editEvaluateState({ id: this.id, state: this.state }).then(res => {
                            uni.showToast({ title: res.info });
                            setTimeout(() => {
                                uni.redirectTo({ url: "/pages/evaluate/index" });
                            }, 1000);
                        })
                    }
                }
            });
        },
    },
    onLoad(option) {
        this.state = option.state;
        this.id = option.id;
    }
}
</script>
<style lang="scss" scoped>
.page {
    background-color: #eeeeee;
    min-height: 100vh;

    .list {
        padding: 30rpx;
        display: flex;
        flex-wrap: wrap;

        .item {
            width: calc(50% - 20rpx);
            background-color: #fff;
            padding: 30rpx 50rpx;
            border-radius: 12rpx;
            margin-right: 20rpx;
            font-size: 30rpx;
            box-sizing: border-box;
            font-size: 26rpx;
            margin-bottom: 30rpx;
            text-align: center;

            &:nth-of-type(2n) {
                margin-right: 0px;
            }

            &.active {
                background-color: #51aa38;
                color: #fff;
            }
        }
    }

    .submit {
        padding: 30rpx;
        padding-top: 0;
    }
}
</style>